<template>
  <div>
  <el-row v-if="!isInfo">
        <span style="line-height: 40px;">{{currentOrg.orgName}}</span>
        <el-button style="float: right;" icon="el-icon-plus" @click="handleAdd" type="primary"
        v-hasPermi="['labdata:orgnization:edit']">新增机构</el-button>
      </el-row>
    <el-row class="title-bar">
      <span class="title-bar-span">基础信息</span>
      <el-button class="title-button" icon="el-icon-edit" v-show="!is_org_edit" type="text" @click="handleOrgUpdate"
        v-hasPermi="['labdata:orgnization:edit']"></el-button>
      <el-button class="title-button" icon="el-icon-close" v-show="is_org_edit" type="text" @click="handleOrgClose"
        ></el-button>
      <el-button class="title-button" icon="el-icon-check" v-show="is_org_edit" type="text" @click="handleOrgSubmit"
        v-hasPermi="['labdata:orgnization:edit']"></el-button>
    </el-row>
    <table class="tb_edit">
      <tr>
        <td class="td_label">上<span style="margin-left: 25px;"></span>级:</td>
        <td class="td_text"><span v-show="!is_org_edit ">{{currentOrg.parentName}}</span>
          <treeselect :default-expand-level="1" v-show="is_org_edit" v-model="currentOrg.parentId" :options="deptOptions" :show-count="true" class="input_w"
            placeholder="请输入上级机构" size="small" />
        </td>
        <td class="td_label">状<span style="margin-left: 25px;"></span>态:</td>
        <td class="td_text"><span v-show="!is_org_edit"
            v-text="this.selectDictLabel(this.orgStatusOptOptions,currentOrg.orgStatusOpt)"></span>
          <el-select v-show="is_org_edit" v-model="currentOrg.orgStatusOpt" placeholder="请选择状态" size="small" class="input_w">
            <el-option v-for="dict in orgStatusOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"></el-option>
          </el-select>
        </td>
        <td class="td_label">存在下级:</td>
        <td class="td_text"><span v-show="!is_org_edit"
            v-text="this.selectDictLabel(this.hasChildOptOptions,currentOrg.hasChildOpt)"></span>
          <el-select v-show="is_org_edit" v-model="currentOrg.hasChildOpt" placeholder="请选择存在下级" size="small" class="input_w">
            <el-option v-for="dict in hasChildOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>名<span style="margin-left: 25px;"></span>称:</td>
        <td><span v-show="!is_org_edit" v-text="currentOrg.orgName"></span>
          <el-input v-show="is_org_edit" v-model="currentOrg.orgName" placeholder="请输入机构名称" size="small" class="input_w"/>
        </td>
        <td>编<span style="margin-left: 25px;"></span>码:</td>
        <td><span v-show="!is_org_edit" v-text="currentOrg.orgCode"></span>
          <el-input v-show="is_org_edit" v-model="currentOrg.orgCode" placeholder="请输入机构代码" size="small" class="input_w"/>
        </td>
        <td>属<span style="margin-left: 25px;"></span>性:</td>
        <td><span v-show="!is_org_edit"
            v-text="this.selectDictLabel(this.orgFunctionOptOptions,currentOrg.orgFunctionOpt)"></span>
          <el-select v-show="is_org_edit" v-model="currentOrg.orgFunctionOpt" placeholder="请选择机构属性" size="small" class="input_w">
            <el-option v-for="dict in orgFunctionOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>创建年份:</td>
        <td><span v-show="!is_org_edit" v-text="currentOrg.createYear"></span>
          <el-input v-show="is_org_edit" v-model="currentOrg.createYear" placeholder="请输入创建年份" size="small" class="input_w"/>
        </td>
        <td>二<span style="margin-left: 7px;"></span>维<span style="margin-left: 7px;"></span>码:</td>
        <td><a href="#" @click="lookUrl" style="color: #005DF7;text-underline:inherit">查看</a></td>
        <td >
        <!--
          <template v-if="currentOrg.orgFunctionOpt==4">
            <div v-if="currentOrg.instanceId">
              <el-button type="primary" size="mini"  @click="handleDetail">查看申报备案</el-button>
            </div>
            <div v-else>
               <el-button type="primary" size="mini"  @click="submitDeclarationFiling">提交申报备案</el-button>
            </div>
        </template>
        -->
          <!-- <el-button type="primary" size="mini" v-if="currentOrg.instanceId" @click="submitDeclarationFiling">提交申报备案</el-button></td>
        <td ><el-button type="primary" size="mini" v-if="currentOrg.instanceId" @click="submitDeclarationFiling">查看申报备案</el-button></td>
        <td > -->


        </td>
      </tr>
    </table>
    <!-- 添加或修改机构对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-form-item label="机构分组" prop="orgGroupOpt">
            <el-select v-model="form.orgGroupOpt" placeholder="请选择机构分组" style="width: 480px;" size="small">
              <el-option v-for="dict in orgGroupOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="上级机构" prop="parentId">
            <treeselect v-model="form.parentId" :options="deptOptions" :default-expand-level="2"
            :show-count="true" placeholder="请输入上级机构"
              size="small" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="机构名称" prop="orgName">
            <el-input v-model="form.orgName" placeholder="请输入机构名称" size="small" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构代码" prop="orgCode">
              <el-input v-model="form.orgCode" placeholder="请输入机构代码" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构属性" prop="orgFunctionOpt">
              <el-select v-model="form.orgFunctionOpt" placeholder="请选择机构属性" size="small">
                <el-option v-for="dict in orgFunctionOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建年份" prop="createYear">
              <el-input v-model="form.createYear" placeholder="请输入创建年份" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存在下级" prop="hasChildOpt">
              <el-select v-model="form.hasChildOpt" placeholder="请选择存在下级" size="small">
                <el-option v-for="dict in hasChildOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="false">
          <el-col :span="12">
            <el-form-item label="二维码" prop="qrCode">
              <el-input v-model="form.qrCode" placeholder="请输入二维码" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="orgStatusOpt">
              <el-select v-model="form.orgStatusOpt" placeholder="请选择状态" size="small">
                <el-option v-for="dict in orgStatusOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="qrVisible" center :append-to-body='true' width="500px">
          <img width="100%" :src="qrUrl" alt="" />
    </el-dialog>

    <!-- 申报备案弹出层 -->
    <el-dialog :title="title" :visible.sync="filingOpen" width="900px" append-to-body>

      <el-tabs v-model="activeName">
        <el-tab-pane label="组织机构流程表单" name="first"></el-tab-pane>
        <el-tab-pane label="流程导入" name="third" >
          <FlowChoose ref="workFlow" @workflow="setWorkflow" :id="form.workflowId" :businessType="form.businessTypeOpt"></FlowChoose>
        </el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="filingForm" :rules="rules" label-width="100px" v-if="activeName=='first'">
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="流程创建" prop="flowCreation">
              <span class="flowStyle">{{form.flowCreation}}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="20">
            <div style="float:right">
              <el-button :class="showCopy?'dis_active':'active'" @click="showCopy=showCopy?false:true" type="text">任务抄送
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="任务抄送" prop="copyToUsers" v-show="showCopy">
          <div class="purchase_s_view">
            <el-input v-model="choosedUserName" placeholder="抄送人员" style="width: 500px;" />
            <el-button type="primary" @click="selectUser" plain>选择用户</el-button>
          </div>
        </el-form-item>
        <el-row>
          <!-- <el-col :span="22">
            <el-form-item label="流程名称" prop="flowName" size="small">
              <el-input v-model="filingForm.flowName" placeholder="请输入流程名称" class="form_short" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
           <el-col :span="8">
            <el-form-item label="流程名称" prop="flowName" size="small">
              <span  v-text="filingForm.flowName"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上级" prop="flowName" size="small">
              <span>{{currentOrg.parentName}}</span>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="状态" prop="flowName" size="small">
              <span v-text="this.selectDictLabel(this.orgStatusOptOptions,currentOrg.orgStatusOpt)"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="存在下级" prop="flowName" size="small">
              <span v-text="this.selectDictLabel(this.hasChildOptOptions,currentOrg.hasChildOpt)"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="名称" prop="flowName" size="small">
              <span  v-text="currentOrg.orgName"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="编码" prop="flowName" size="small">
              <span  v-text="currentOrg.orgCode"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="属性" prop="flowName" size="small">
              <span v-text="this.selectDictLabel(this.orgFunctionOptOptions,currentOrg.orgFunctionOpt)"></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建年份" prop="flowName" size="small">
              <span  v-text="currentOrg.createYear"></span>
            </el-form-item>
          </el-col>

          <el-col :span="14">
            <el-form-item label="工作人员列表" prop="flowName" size="small">
              <!-- <span  v-text="currentOrg.createYear"></span> -->
            </el-form-item>
          </el-col>


            <el-table v-loading="loading" :data="employeeList">
              <el-table-column label="编号" align="center" prop="employeeId" />
              <el-table-column label="工号" align="center" prop="employeeNo" />
              <el-table-column label="姓名" align="center" prop="employeeName" />
              <el-table-column label="任职起始日期" align="center" prop="hireStartDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.hireStartDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任职状态" align="center" prop="hireStatusOpt" :formatter="hireStatusOptFormat" />
              <el-table-column label="任职批文号 " align="center" prop="approvalNo" width="200"/>
            </el-table>

            <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitFormFlow" v-if="activeName=='first'">保存</el-button> -->
        <el-button type="primary" @click="submitWorkflow" v-if="activeName=='third'">提交</el-button>
        <el-button @click="filingCancel">关闭</el-button>
      </div>
      <ChooseUser @chooseUsers="getUser" ref="checkedUserCom"></ChooseUser>
    </el-dialog>
    <DeclarationFilingDetail ref="previewCom" />
  </div>
</template>

<script>
  import {
    listOrgnization,
    getOrgnization,
    delOrgnization,
    addOrgnization,
    updateOrgnization,
    exportOrgnization
  } from "@/api/labdata/orgnization";
  import {commitDeclarationFiling, listDeclarationFiling, getDeclarationFiling, delDeclarationFiling, addDeclarationFiling, updateDeclarationFiling, exportDeclarationFiling } from "@/api/labdata/declarationFiling";
  import { listEmployee, getEmployee, delEmployee, addEmployee, updateEmployee, exportEmployee } from "@/api/labdata/employee";
  import DeclarationFilingDetail from "@/views/labdata/declarationFiling/declarationFilingDetail.vue";

  import {
    listOrgKinds
  } from "@/api/college/orgKinds";
  import {
    treeselect
  } from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import FlowChoose from '@/views/labdata/flowDefination/flow_choose.vue'
  import ChooseUser from "@/views/labdata/employee/user_choose_com.vue";
  export default {
    name: "OrgCom",
    components: {
      Treeselect,FlowChoose,ChooseUser,DeclarationFilingDetail
    },
    data() {
      return {
        total:0,
        activeName: "first",
        // 申报备案弹出层
        filingOpen: false,
        showCopy: false,
        choosedUserName: '',
        checkedUserList: [],
        filingForm:{},
        // 实验室工作人员表格数据
      employeeList: [],
      // 任职状态字典
      hireStatusOptOptions: [],
      // 工作人员列表查询对象
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      },

        host:process.env.VUE_APP_BASE_API,
        qrVisible:false,
        qrUrl:null,
        currentOrg: {},
        //是否机构处于编辑状态
        is_org_edit: false,
        // 遮罩层
        loading: true,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: [],
        // 部门名称
        deptName: undefined,
        // 是否显示弹出层
        open: false,
        // 机构属性字典，修改为基础数据表了
        orgFunctionOptOptions: [],
        // 存在下级字典
        hasChildOptOptions: [],
        // 状态字典
        orgStatusOptOptions: [],
        // 机构分组字典
        orgGroupOptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          parentId: [{
            required: true,
            message: "上级机构不能为空",
            trigger: "blur"
          }],
          orgName: [{
            required: true,
            message: "机构名称不能为空",
            trigger: "blur"
          }],
          orgCode: [{
            required: true,
            message: "机构代码不能为空",
            trigger: "blur"
          }],
          createYear: [{
            required: true,
            message: "创建年份不能为空",
            trigger: "blur"
          }],
          orgFunctionOpt: [{
            required: true,
            message: "机构属性不能为空",
            trigger: "blur"
          }],
          hasChildOpt: [{
            required: true,
            message: "存在下级不能为空",
            trigger: "change"
          }],
        }
      };
    },
    props: {
      isInfo:Boolean,
      childOrg: {
        type: Object,
        default: () => ({})
      },
    },
    watch: {
      childOrg: function(newVal, oldVal) {
        this.currentOrg = newVal;
        this.is_org_edit = false;
      },
      checkedUserList: function (val) {
        this.choosedUserName = '';
        this.form.copyToUsers = '';
        val.forEach((item, index) => {
          if (index > 0) {
            this.choosedUserName += ",";
            this.form.copyToUsers += ",";
          }
          this.choosedUserName += item.nickName;
          this.form.copyToUsers += item.userId;
        })
      },
    },
    created() {
      this.getTreeselect();
      /* this.getDicts("orgFunctionOpt").then(response => {
            this.orgFunctionOptOptions = response.data;
          }); */
      this.getDicts("hireStatusOpt").then(response => {
      this.hireStatusOptOptions = response.data;
      });
      this.getOrgKinds();
      this.getDicts("hasChildOpt").then(response => {
        this.hasChildOptOptions = response.data;
      });
      this.getDicts("sys_normal_disable").then(response => {
        this.orgStatusOptOptions = response.data;
      });
      this.getDicts("orgGroupOpt").then(response => {
        this.orgGroupOptOptions = response.data;
      });
      this.currentOrg = this.childOrg;
      this.handleOrgClose();
    },
    methods: {
      lookUrl() {
        this.qrUrl = this.host+'/labdata/labFile/orgQR?id='+this.childOrg.orgId;
        this.qrVisible = true;
      },
      handleOrgUpdate() {
        this.is_org_edit = true;
      },
      getOrgKinds() {
        let kindsForm = {};
        kindsForm.pageSize = 1000;
        kindsForm.pageNum = 1;
        listOrgKinds(kindsForm).then(response => {
          response.rows.forEach(item => {
            this.orgFunctionOptOptions.push({
              dictValue: item.orgKindId,
              dictLabel: item.name
            });
          });
        });
      },
      /* refreshData(parentOrg){
         this.currentOrg = parentOrg;
       }, */
      handleOrgClose() {
        this.is_org_edit = false;
      },
      handleOrgSubmit() {
        updateOrgnization(this.currentOrg).then(response => {
          this.msgSuccess("修改成功");
          this.is_org_edit = false;
          this.$emit("refreshTree");
          //刷新选择树
          this.getTreeselect();
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = { };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加机构";
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addOrgnization(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.$emit("refreshTree");
              //刷新选择树
              this.getTreeselect();
            });
          }
        });
      },
      /** 提交申报备案 */
      submitDeclarationFiling() {
        this.filingForm = this.currentOrg;
        this.filingForm.flowName = this.currentOrg.orgName +"备案",
        // 查询工作人员列表
        this.getList();
        this.filingOpen = true;
        this.title = "组织机构申报备案申请预览";
      },
      /** 关闭提交申报备案 */
      filingCancel() {
        this.filingOpen = false;
      },

      getUser(e) {
        //console.log(JSON.stringify(e));
        this.checkedUserList = e;
      },
      selectUser() {
        if (this.checkedUserList && this.checkedUserList.length > 0) {
          this.$refs["checkedUserCom"].handleAdd(this.checkedUserList);
        } else {
          this.$refs["checkedUserCom"].handleAdd();
        }
      },
      setWorkflow(workflowId) {
        this.filingForm.workflowId = workflowId;
      },
      // 提交流程
      submitWorkflow() {
		if(!this.form.workflowId){
		    this.form.workflowId = this.$refs["workFlow"].getWorkflowId();
		}
        this.filingForm.createBy = this.$store.state.user.name;
        this.filingForm.instanceId = this.currentOrg.instanceId;
        commitDeclarationFiling(this.filingForm).then((response) => {
          this.msgSuccess("提交成功");
          this.filingOpen = false;
          // 刷新页面
          this.$router.go(0)
        });
      },
      // 保存流程
      submitFormFlow() {
        this.filingForm.createBy = this.$store.state.user.name;
        addDeclarationFiling(this.filingForm).then((response) => {
          this.msgSuccess("提交成功");
          this.open = false;
          // this.getList();
        });
      },

        /** 查询实验室工作人员列表 */
    getList() {
      this.loading = true;
      this.queryParams.orgId = this.currentOrg.orgId;
      listEmployee(this.queryParams).then(response => {
        this.employeeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
     // 任职状态字典翻译
     hireStatusOptFormat(row, column) {
      return this.selectDictLabel(this.hireStatusOptOptions, row.hireStatusOpt);
    },
      /**查看 */
      handleDetail() {
        this.$refs['previewCom'].handleUpdate(this.currentOrg);
      },

    }
  };
</script>
<style type="text/css" lang="scss" scoped>
  .input_w{
    width: 200px;
    margin-top: -2px;
  }
  .tb_edit{
    //width: 100%;
  }
  .tb_edit tr td{
    padding: 10px 5px 10px 0px;
  }
  .td_text{
    text-align: left;
    valign: middle;
    min-width:200px;
  }
  .td_label{
    min-width:68px;
    valign:middle;
  }
</style>
